<template>
    <div>
       <table>
           <tbody>
            <tr is="Trs" :goodsArr="goodsArr"></tr>   
           </tbody>
          <tfoot>
              <p>All Number: {{ allnum }}</p>
          </tfoot>
       </table>
    </div>
</template>

<script>

import Trs from './components/Trs.vue'
export default {
    name:'app',
    components:{
        Trs
    },
    data(){
        return {
     allnum:0,
     goodsArr: [
    {
        count: 0,
        goodsName: "Watermelon"
    }, {
        count: 0,
        goodsName: "Banana"
    }, {
        count: 0,
        goodsName: "Orange"
    }, {
        count: 0,
        goodsName: "Pineapple"
    }, {
        count: 0,
        goodsName: "Strawberry"
    }
]
        }
    },
    watch:{
        goodsArr:{
            deep:true,
            handler(goodsArr){
                this.allnum=0;
                goodsArr.forEach(ele=>
                this.allnum+=parseInt(ele.count) 
                )
                return this.allnum;
            }
        }
    }
}
</script>

<style>

</style>